<template>
    <div>
        <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                label-position="left"
        >
            <el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name" ></el-input>
            </el-form-item>

            <el-form-item label="学号" prop="id">
                <el-input v-model="ruleForm.id" ></el-input>
            </el-form-item>

            <el-form-item label="加分原因" prop="reason">
                <el-input
                        v-model="ruleForm.reason"
                        type="textarea"
                        placeholder="请输入，100个字以内。"
                        maxlength="100"
                        :autosize="{ minRows: 3, maxRows: 7 }"
                ></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
    /*尝试写一个修改和删除的*/
    import {useAttrs,ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, onMounted} from 'vue'

    const propss = defineProps(["a","b","c","d","name","id","rowData"])
    const ruleFormRef = ref()

    let rules = reactive({
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        id: [{ required: true, message: '请输入学号', trigger: 'blur' }],
    });

    let ruleForm = reactive({
        name: '',
        id: '',
        additional: '',
        reason: ''
    });

    onMounted(()=>{
        // a 不會出現在这里
        console.log("内容区域")
        console.log("props",propss,propss.a,propss.rowData)
        ruleForm.name = propss.name
        ruleForm.id = propss.id
    })

    const getValues=()=>{
        return ruleForm
    }
    const passGuard = async () => {

        const valid = await ruleFormRef.value.validate(value => {
            return value
        })
        return valid
    }

   const resetForm = ()=>{
       ruleFormRef.resetFields()
   }

    defineExpose({
        getValues,
        passGuard
    })
</script>

<style scoped>

</style>